<template>
  <el-container style="height: 100vh; flex-direction: column">
    <!-- 顶部 Header -->
    <el-header style="display: flex; justify-content: space-between; align-items: center; background-color: rgb(245, 245, 245); color: #333; height: 60px;">
      <h2 style="margin: 0;">后台管理系统</h2>

      <!-- 用户信息区域 -->
      <div style="display: flex; align-items: center;">
        <el-avatar
          size="medium"
          src="https://img1.baidu.com/it/u=3530732730,4271362942&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
        />
        <el-dropdown>
          <span class="el-dropdown-link" style="margin-left: 10px; color: #333; cursor: pointer;">
            admin <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <!-- 下方：侧边栏 + 主体内容 -->
    <el-container style="flex: 1;">
      <el-aside width="200px" style="background-color: rgb(245, 245, 245); color: #333;">
        <el-menu
          router
          :default-active="$route.path"
          background-color="rgb(245, 245, 245)"
          text-color="#333"
          active-text-color="#409EFF"
        >
          <el-menu-item index="/homePage">
            <i class="el-icon-house"></i>
            <span>首页</span>
          </el-menu-item>

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/userinfo">
              <i class="el-icon-user"></i>
              <span>用户信息</span>
            </el-menu-item>
            <el-menu-item index="/userManage">
              <i class="el-icon-s-custom"></i>
              <span>用户管理</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-data-analysis"></i>
              <span>数据开发</span>
            </template>
            <el-menu-item index="/sqlEditor">
              <i class="el-icon-edit-outline"></i>
              <span>SQL 编辑器</span>
            </el-menu-item>
            <el-menu-item index="/dataSource">
              <i class="el-icon-edit-outline"></i>
              <span>数据源配置</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-main style="background-color: rgb(255, 255, 255); padding: 10px;">
        <ScrollTabs />
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import ScrollTabs from '@/components/ScrollTabs.vue'
export default {
 name: 'AppLayout',
 components: {ScrollTabs}
}
</script>
